<template>
	<div class="pages">
		<!-- 标题 -->
		<div class="taskbar">
			<div class="title">
				<div class="line"></div>
				<div class="text" v-text="state.bar.title"></div>
			</div>
			<div v-if="state.bar.badge" class="badge" v-text="state.bar.badge"></div>
		</div>
		<div class="card">
			<van-field
				v-model="state.approvalPostscript"
				rows="2"
				autosize
    		type="textarea"
    		maxlength="500"
    		placeholder="请填写退回原因"
    		show-word-limit />
			<van-divider class="line" />
			<van-steps direction="vertical" :active="state.active" active-color="#4674C9">
				<van-step v-for="(item, idx) in state.lists" :key="idx">
					<template v-slot:active-icon>
						<div class="circle active"></div>
					</template>
					<template v-slot:inactive-icon>
						<div class="circle"></div>
					</template>
					<template v-slot:default>
						<div class="title" v-text="formatType(item.eventType)"></div>
						<div class="text" v-text="`部门：${item.approvalOrgName || '暂无部门'}`"></div>
						<div class="text" v-text="`人员：${item.approvalUserName || '暂无人员'}`"></div>
						<div class="text" v-if="item.approvalTime" v-text="`时间：${item.approvalTime || '暂无时间'}`"></div>
					</template>
				</van-step>
			</van-steps>
		</div>
		<div class="tools">
			<div class="confirm" @click="submit">确 定</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { taskInfoTime, getInstructionsConut, reportInfoTime } from '@/api/todo'
import Toast from 'vant/lib/toast'

const route = useRoute()
const router = useRouter()

const state = reactive({
	bar: {
		title: '退回至上一个节点',
		badge: 0,
	},
	approvalPostscript: '',
	active: 0,
	lists: [] as any
})

const initProcess = async (taskId: string) => {
	const res = (<string>route.query.type) == '1001' ? await taskInfoTime({ taskId: taskId }) : await reportInfoTime({ id: taskId })
	const data = res.data
	state.lists = data
	// 判断流程到第几步
	const index = state.lists.findIndex((item: any) => {
		if(item) return item.approvalStatus == '0'
	})

	if(index != -1) {
		state.active = index
	}else {
		state.active = state.lists.length - 1
	}
}

const formatType = (type: string) => {
	switch(type) {
		case '0':
			return '创建'
		case '1':
			return '审批'
		case '2':
			return '发送'
		case '3':
			return '接收'
		case '4':
			return '办理'
		default:
			return '未知类型'
	}
}

const submit = async () => {
	let params = {
		approvalPostscript: state.approvalPostscript,
		id: route.query.taskId as string,
	}
	try {
		const res = await getInstructionsConut(params)
		res.code == 200 && 
		Toast({
      message: res.msg,
      position: 'bottom',
			onClose: () => {
				router.back()
			}
    });
		res.code == 500 && 
		Toast({
      message: res.msg,
      position: 'bottom'
    });
	} catch (error: any) {
		Toast({
			message: error.data.msg,
			position: 'bottom',
		});
	}
}

onMounted(() => {
	initProcess(route.query.taskId as string)
})
</script>
<style lang="scss" scoped>
.pages {
	display: flex;
	flex-direction: column;
	// overflow-y: scroll;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;

	.taskbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		margin: 12px;

		.title {
			display: flex;
			align-items: center;

			.line {
				width: 4px;
				height: 16px;
				margin-right: 8px;
				background-color: $primary-color;
			}

			.text {
				font-weight: 700;
				text-align: left;
				color: #181818;
				line-height: 12px;
			}
		}

		.badge {
			width: 29px;
			height: 16px;
			border-radius: 8.5px;
			background-color: $primary-color;
			text-align: center;
			line-height: 16px;
			font-size: 10px;
			font-weight: bold;
			color: #fff;
		}
	}

	.card {
		flex: 1;
		height: 0;
		overflow-y: scroll;
		background: #ffffff;
		border-radius: 5px;
		box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		margin: 0 12px 12px 12px;
		padding: 12px;

		&:deep(.van-cell) {
			background-color: #F8F8F8;
			border: 0.5px solid #F7F7F7;
			border-radius: 5px;
			padding: 4px 8px;
			font-size: 10px;

			&:after {
				content: none;
			}
		}

		.title {
			font-size: 14px;
			font-weight: bold;
			text-align: left;
			color: #181818;
			margin-bottom: 8px;
		}

		.text {
			font-size: 10px;
			font-weight: bold;
			text-align: left;
			color: #646464;
			margin-bottom: 6px;
		}

		.circle {
			width: 5px;
			height: 5px;
			border-radius: 50%;
			background-color: #ffffff;
			border: 3px solid #ECECEC;
		}

		.active {
			border-color: $primary-color !important;
		}
	}

	.tools {
		background: #ffffff;
		box-shadow: 0px -1px 2.5px 1px rgba(0, 0, 0, 0.03), -0.5px 0px 0px 0.5px #ebebeb inset;
		box-sizing: border-box;
		padding: 10px 12px;

		.confirm {
			background: #f1f4ff;
			border-radius: 5px;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			font-weight: bold;
			color: $primary-color;
		}
	}
}
</style>